import React, { createContext, useContext, useEffect, useMemo, useReducer, useState } from 'react'
import { getArticleById,getCommentsByArticleId } from './fake-api'
import { useHistory } from 'react-router'
import MainHead from './MainHead'
import Modal from './Modal'
// const now = '1627016217'
// var now = Date.parse(new Date())/1000
function Level(article){
    const lv1 = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/636691cd590f92898cfcda37357472b8.svg'
    const lv2 = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f597b88d22ce5370bd94495780459040.svg'
    const lv3 = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e108c685147dfe1fb03d4a37257fb417.svg'
    const lv4 = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/2c3fafd535a0625b44a5a57f9f536d77.svg'
    const lv5 = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/f8d51984638784aff27209d38b6cd3bf.svg'
    if(article){
    if(article.author_user_info.level===1)
        return lv1
    else if(article.author_user_info.level===2)
        return lv2
    else if(article.author_user_info.level===3)
        return lv3
    else if(article.author_user_info.level===4)
        return lv4
    else if(article.author_user_info.level===5)
        return lv5
    }
    else
        return ''    
}

function TagPic(article){
    const react = 'https://lc-gold-cdn.xitu.io/f655215074250f10f8d4.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const javascript = 'https://lc-gold-cdn.xitu.io/5d70fd6af940df373834.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const vue = 'https://lc-gold-cdn.xitu.io/7b5c3eb591b671749fee.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const java = 'https://lc-gold-cdn.xitu.io/f8ee3cd45f949a546263.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const go = 'https://lc-gold-cdn.xitu.io/1aae38ab22d12b654cfa.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const python = 'https://lc-gold-cdn.xitu.io/b51a1dacf9bb7883defe.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const flutter = 'https://user-gold-cdn.xitu.io/1519790365175e2d3ba2174d5c8f3fdc4687a8bbf5768.jpg?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const kotlin = 'https://lc-gold-cdn.xitu.io/9979306cd7d324ca5a27.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const swift = 'https://lc-gold-cdn.xitu.io/eb7ab66be4c2898b5aa9.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    const objective = 'https://lc-gold-cdn.xitu.io/71d968ea2fde62410b19.png?imageView2/2/w/40/h/40/q/85/format/webp/interlace/1'
    if(article){
        if(article.category_info.second_category_name==='Vue.js')
            return vue
        else if(article.category_info.second_category_name==='React.js')
            return react
        else if(article.category_info.second_category_name==='Javascript')
            return javascript
        else if(article.category_info.second_category_name==='Java')
            return java
        else if(article.category_info.second_category_name==='Python')
            return python
        else if(article.category_info.second_category_name==='Swift')
            return swift
        else if(article.category_info.second_category_name==='Objective-C')
            return objective
        else if(article.category_info.second_category_name==='Kotlin')
            return kotlin
        else if(article.category_info.second_category_name==='Flutter')
            return flutter
        else if(article.category_info.second_category_name==='Go')
            return go
    }
}

function PostBar({id:articleId}){
    const likePic = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/00ba359ecd0075e59ffbc3d810af551d.svg' 
    const collectPic ='https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/3d482c7a948bac826e155953b2a28a9e.svg'
    const commentPic = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/336af4d1fafabcca3b770c8ad7a50781.svg'
    const [like,setLike] = useState(null)
    const [collect,setCollect] = useState(null)
    const [comment,setComment] = useState(null)
    const {dispatch} = useContext(ShowComment)
    useEffect(()=>{
        async function getCount(){
            const a = await getArticleById(articleId).then(promise=>{return promise.data.article})
            setLike(a.article_info.digg_count)
            setCollect(a.article_info.collect_count)
            setComment(a.article_info.comment_count)
        }
        getCount()
    },[articleId])  
    
    return(
    <div className='postBar'  style={{width:375,height:50,backgroundColor:'#fff',color:'#71777C',zIndex:'200',position:'fixed',bottom:0,display:'flex',justifyContent:'center'}}>
        <div className='likeBox' style={{height:'100%',flexGrow:'5',display:'flex',justifyContent:'center',alignItems:'center',cursor:'pointer'}}>
            <img src={likePic} alt={likePic}></img>
            <div className='like' style={{marginLeft:'10px'}}> 
                {like}
            </div>
        </div>
        <div className='collectBox' style={{height:'100%',flexGrow:'1',display:'flex',justifyContent:'center',alignItems:'center',flexDirection:'column',cursor:'pointer'}}>
            <img alt={collectPic} src={collectPic} style={{height:22}}></img>
            <div className='collect' style={{height:18,fontSize:'13px'}}>
                {collect}
            </div>
        </div>
        <div className='commentBox' onClick={()=>{dispatch({type:'show'});document.body.style.overflow = 'hidden'}} style={{height:'100%',flexGrow:'1',display:'flex',justifyContent:'center',alignItems:'center',flexDirection:'column',cursor:'pointer'}}>
        <img alt={commentPic} src={commentPic} style={{height:22}}></img>
            <div className='comment' style={{height:18,fontSize:'13px'}}>
                {comment}
            </div>
        </div>
    </div>
    )
}


function getTime(time) {
    var temp = new Date(time*1000)     
    var year = temp.getFullYear()
    var month = temp.getMonth()+1
    var day = temp.getDate()
    return year+'年'+month+'月'+day+'日'  
 }
function View({id:articleId}){
    const [article,setArticle]= useState(null)
    const [level,setLevel] = useState(null)
    const [tagPic,setTagPic] = useState(null)
    const [toTop,setToTop] = useState('none')
    let history = useHistory()
    useEffect(()=>{
        async function get(){
            const a = await getArticleById(articleId).then(promise=>{return promise.data.article})
            setArticle(a)
            setLevel(Level(a))
            setTagPic(TagPic(a))
        }
        get()
    },[articleId,article])
    useEffect(()=>{
        function show(){
            let a = document.documentElement.scrollTop
            if(a>100)
                setToTop('')
            else  
                setToTop('none')
        }
        window.addEventListener('scroll',show)
        return()=>{
            window.removeEventListener('scroll',show)
        }
    },[])
    useEffect(()=>{
        function backToTop(){
            document.documentElement.scrollTop=0
        }
        const toTopButton = document.getElementsByClassName('backToTop')[0]
        toTopButton.addEventListener('click',backToTop)
        return()=>{
            toTopButton.removeEventListener('click',backToTop)
        }
    })
    useEffect(()=>{
        const view = document.getElementsByClassName('view')[0]
        let start,end,diff  
        const touchstart=(e)=>{
            start = e.touches[0].pageX
        }
        const touchmove=(e)=>{
            end = e.touches[0].pageX
            if(start)
                diff= start-end
            else
                diff= 0-end
            if(diff<-100)
                view.style.transition='all 0.3s'
        }
        const touchend=()=>{
            if(diff<-100&&start)
            {
                history.goBack()
            }
        }
        view.addEventListener('touchstart',touchstart)
        view.addEventListener('touchmove',touchmove)
        view.addEventListener('touchend',touchend)
        return()=>{
            view.removeEventListener('touchstart',touchstart)
            view.removeEventListener('touchmove',touchmove)
            view.removeEventListener('touchend',touchend)
        }
    })
    const upButton = <svg t="1627282010759" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8108" width="24" height="24"><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" p-id="8109" fill="#dddddd"></path></svg>
    return (
    <div className='view'>
        <div className='space' style={{height:80,backgroundColor:'#f4f5f5'}}>

        </div>
        <div className='articleBox' style={{padding:'0 24px 0 24px'}}>
            <div className='userBox' style={{width:'100%',margin:'24px 0 24px 0',height:43,display:'flex'}}>
                <div className='userImage' style={{width:52,height:40}}>
                    <img alt='' src={article?article.author_user_info.avatar_large:''} style={{width:40,height:'100%',borderRadius:'50%'}}></img>
                </div>
                <div className='userInfo' style={{width:220,height:43,display:'flex',flexWrap:'wrap'}}>
                    <div className='line' style={{width:220,height:22,display:'flex'}}>
                       <div className='userName' style={{lineHeight:'22px',fontSize:'16px',color:'#333',fontWeight:'700',height:22}}>
                            {article?article.author_user_info.user_name:''}
                        </div>
                        <div className='userLevel' style={{marginLeft:8,height:22}}>
                            <img alt='' src={level}></img>
                        </div>
                    </div>
                    <div className='time' style={{fontSize:'14px',height:22,lineHeight:'22px',color:'#909090',letterSpacing:'1px',textAlign:'center'}}>
                        {article?getTime(article.article_info.ctime):''}   
                    </div>
                    <div className='viewCount' style={{marginLeft:'15px',height:22,lineHeight:'22px',color:'#909090',fontSize:'14px'}}>
                        {article?'阅读 '+article.article_info.view_count:'阅读'}
                    </div>
                </div>
                <div className='followButton' style={{width:55}}>
                    <button  style={{width:55,height:26,marginTop:15,border:'1px solid #6cbd45',color:'#6cbd45',fontSize:'13px',backgroundColor:'#fff'}}>关注</button>
                </div>
            </div>
            <div className='articleImg' style={{marginBottom:'40px'}}>
                <img alt='' src={article?article.article_info.cover_image:''} style={{width:'100%'}}></img>
            </div>
            <div className='articleTitle' style={{marginBottom:'16px',fontSize:'24px',fontWeight:'700',lineHeight:1.5}}>
                {article?article.article_info.title:''}
            </div>
            <div className='content' dangerouslySetInnerHTML={{__html:article?article.article_content:null}}>
            </div>
            <div className='tagBox' style={{borderTop:'1px solid #e5e6eb',paddingTop:'24px',width:'100%',height:88,marginBottom:'24px',fontSize:'14px',color:'#333'}}>
                <div className='categoriesList' style={{height:44,display:'flex',alignItems:'center'}}>
                    <div className='categoriesTitle' style={{fontWeight:'500',marginRight:'12px',lineHeight:'44px',textAlign:'center'}}>
                        文章分类
                    </div>
                    <div className='categoriesItem' style={{backgroundColor:'#fafafa',lineHeight:'32px',textAlign:'center',color:'#4e5969',padding:'0 10px 0 10px',borderRadius:'2px',marginRight:'10px'}}>
                        {article?article.category_info.first_category_name:''}
                    </div>
                </div>
                <div className='tagList' style={{height:44,display:'flex',alignItems:'center'}}>
                    <div className='tagTitle' style={{fontWeight:'500',marginRight:'12px',lineHeight:'44px',textAlign:'center'}}>
                        文章标签
                    </div>
                    <div className='tagItem' style={{backgroundColor:'#fafafa',lineHeight:'32px',textAlign:'center',color:'#4e5969',padding:'0 10px 0 5px',borderRadius:'2px',display:'flex',alignItems:'center'}}>
                        <div className='tagPic' style={{height:20,width:20,paddingRight:'5px'}}>
                            <img src={tagPic} alt={tagPic} style={{height:20,width:20}}></img>
                        </div>
                        <div className='tagDetail'>
                            {article?article.category_info.second_category_name:''}
                        </div>
                    </div>
                </div>
            </div>
            <div className='footerAuthorBar' style={{padding:'15px 12px',backgroundColor:'#f4f5f5',height:83,marginBottom:24,boxSizing:'border-box',display:'flex',alignItems:'center'}}>
                <div className='userImage' style={{width:52,height:40}}>
                    <img alt='' src={article?article.author_user_info.avatar_large:''} style={{width:40,height:'100%',borderRadius:'50%'}}></img>
                </div>
                <div className='line' style={{width:216,display:'flex',flexWrap:'wrap'}}>
                    <div className='userName' style={{lineHeight:'22px',fontSize:'16px',color:'#333',fontWeight:'700',height:22}}>
                        {article?article.author_user_info.user_name:''}
                    </div>
                    <div className='userLevel' style={{marginLeft:8,height:22}}>
                        <img alt='' src={level}></img>
                    </div>
                    <div className='jobTitle' style={{fontSize:'13px',height:16,lineHeight:'16px',color:'#909090',textOverflow:'ellipsis',overflow:'hidden'}}>
                        {article?article.author_user_info.job_title:''}
                    </div>
                    <div className='diggCount' style={{fontSize:'12px',height:15,lineHeight:'15px',color:'#909090',marginRight:'5px'}}>
                        {article?'获得点赞 '+article.author_user_info.got_digg_count:""}
                    </div>
                    <div className='viewCount' style={{fontSize:'12px',height:15,lineHeight:'15px',color:'#909090',marginRight:'5px'}}>
                        {article?'获得阅读 '+article.author_user_info.got_view_count.toLocaleString():""}
                    </div>
                </div>
                <div className='followButton' style={{width:55}}>
                    <button  style={{width:55,height:26,marginTop:15,border:'1px solid #6cbd45',color:'#6cbd45',fontSize:'13px',backgroundColor:'#fff'}}>关注</button>
                </div>
            </div>
            <div className='space' style={{width:327,height:50}}>

            </div>
            <div className='backToTop' style={{display:toTop,width:32,height:32,position:'fixed',backgroundColor:'#fff',bottom:150,right:24,borderRadius:'50%',border:'1px solid #ddd',transition:'all 0.3s'}}>
                <div style={{textAlign:'center',marginTop:4}}>
                    {upButton}
                </div>
            </div>
        </div>
        
    </div>)
}
function CommentList({id:articleId}){
    const [comment,setComment] = useState(null)
    const {state,dispatch} = useContext(ShowComment)
    const [height,setHeight] = useState(750)
    const [page,setPage] = useState(0)
    const [inputActive,setInputActive] = useState(0)
    const [data,setData] = useState('')
    // eslint-disable-next-line
    const [inputContent,setInputContent] = useState('')
    useEffect(()=>{
        async function initComment(){
            const a = await getCommentsByArticleId(articleId,page,10).then(promise=>{return promise.data})
            // console.log(a)
            setComment(a.comments)
            setPage(page+1)
        }
        if(page===0){
            initComment()
        }
    },[articleId,page,comment])
    useEffect(()=>{
        const list = document.getElementsByClassName('commentList')[0]
        const box = document.getElementsByClassName('CommentBox')[0]
        let start,end,diff
        const touchstart = (e) =>{
            start = e.touches[0].pageY
        }
        const touchmove = (e) =>{
            end = e.touches[0].pageY
            if(start===undefined)
                diff = 0 - end
            else
                diff = start - end
            if(list.scrollTop===0&&diff<0)
                {
                    box.style.transition = 'all 0.3s'
                    setHeight(750+diff) 
                }
        }
        const touchend = () =>{
            if(start===undefined)
                start =0
            if(diff<-20&&list.scrollTop<=0)
            {
                dispatch({type:'close'})
                document.body.style.overflow = ''
                setHeight(750)
            }
            else if(0>diff>-20)
            {
                setHeight(750)
            } 
        }
        list.addEventListener('touchstart',touchstart)
        list.addEventListener('touchmove',touchmove)
        list.addEventListener('touchend',touchend)
        return()=>{
            list.removeEventListener('touchstart',touchstart)
            list.removeEventListener('touchmove',touchmove)
            list.removeEventListener('touchend',touchend)
        }
    },[dispatch,height])
    useEffect(()=>{
        async function getComment(){
            const a = await getCommentsByArticleId(articleId,page*10,10).then(promise=>{return promise.data})
            setComment(comment.concat(a.comments))
            setPage(page+1)
        }
        let a = document.getElementsByClassName('commentList')[0]
        function handleScroll(){
            let a = document.getElementsByClassName('commentList')[0].scrollTop
            let b = document.getElementsByClassName('commentList')[0].scrollHeight-700 
            if(a===b)
                getComment()
        }
        a.addEventListener('scroll',handleScroll)       
        return()=>{
            a.removeEventListener('scroll',handleScroll)
        }
        
    },[articleId,page,comment])
    useEffect(()=>{
        function close(){
            dispatch({type:'close'})
            document.body.style.overflow = ''
        }
        const closeButton = document.getElementsByClassName('closeButton')[0]
        closeButton.addEventListener('click',close)
        return()=>{
            closeButton.removeEventListener('lick',close)
        }
    },[dispatch])
    useEffect(()=>{
        function active(){
            setInputActive(1)
        }
        function close(){
            setInputActive(0)
        }
        const a = document.getElementsByClassName('inputComment')[0]
        const b = document.getElementsByClassName('commentList')[0]
        a.addEventListener('click',active)
        b.addEventListener('click',close)
        return()=>{
            a.removeEventListener('click',active)
            b.removeEventListener('click',close)
        }
    },[])
    useEffect(()=>{
        const listen=()=>{
            setData(document.getElementsByClassName('inputContent')[0].value)
        }
        const a = document.getElementsByClassName('inputContent')[0]
        if(a)
        {a.addEventListener('change',listen)}
        return()=>{
            if(a)
            {a.removeEventListener('change',listen)}
        }
    })
    return (
        <div>
            <Modal>
                <div className='CommentBox' style={{display:state===0?'none':'flex',width:375,height:height,backgroundColor:'#fff',justifyContent:'center',alignItems:'center',bottom:50,position:'fixed',flexWrap:'wrap'}}>
                    <div className='commentTitle' style={{width:'100%',height:50,backgroundColor:'#f4f5f54d',display:'flex',alignItems:'center'}}>
                        <div className='content' style={{width:255,marginLeft:60,height:'100%',textAlign:'center',lineHeight:'50px',fontSize:'16px',color:'#007FFF'}}>
                            全部评论
                        </div>
                        <div className='closeButton' style={{width:60,height:50,display:'flex',alignItems:'center',justifyContent:'center'}} >
                            <div className='close' style={{fontSize:'32px',width:24,height:24,backgroundColor:'#fff',color:'#007FFF',borderRadius:'50%',textAlign:'center',lineHeight:'16px',transform:'rotate(135deg)'}}>
                                +
                            </div>
                        </div>
                    </div>
                    <div className='commentList' style={{overflow:'scroll',height:700,display:'flex',flexWrap:'wrap'}} >
                        <div className='space' style={{height:10,backgroundColor:'#f4f5f5',width:375}}>

                        </div>
                        {
                        
                            comment?comment.map((i,index)=>{
                                return <div key={index}><CommentBox value={i}/></div>
                                }):''
                        }
                       
                        <div className='space' style={{height:10,backgroundColor:'#f4f5f5',width:375}}>

                        </div>
                    </div>
                    
                    {inputActive===0?
                    <div className='inputComment' style={{width:375,height:50,borderTop:'1px solid #ddd',position:'fixed',bottom:0,display:'flex',zIndex:500,backgroundColor:'#f4f5f5',flexWrap:''}}>
                        <div style={{height:'100%',boxSizing:'border-box',padding:'10px 15px',color:'#71777C',lineHeight:'30px',fontSize:'15px',flex:'5',overflow:'hidden',textOverflow:'ellipsis',outline:'none',whiteSpace:'nowrap',zIndex:100,backgroundColor:'#f4f5f5'}}>
                            {data===''?'输入评论...':data}
                        </div>
                        <button style={{color:'#007FFF',fontSize:'15px',border:'none',backgroundColor:'#f4f5f5',flex:'1',cursor:'pointer'}}>发布</button>
                    </div>
                    :
                    <div className='inputCommentActive' style={{width:375,height:150,borderTop:'',position:'fixed',bottom:0,display:'flex',zIndex:500,backgroundColor:'#f4f5f5',flexWrap:'wrap'}}>
                        <textarea defaultValue={data} id='x' className='inputContent' style={{width:375,height:100,backgroundColor:'#ddd',border:'none',lineHeight:'22px',color:'#71777C',outline:'none',fontSize:'15px',paddingTop:10,borderTopLeftRadius:'10px',borderTopRightRadius:'10px'}} placeholder='输入评论...' ></textarea>
                        <div className='bar' style={{width:375,height:32,backgroundColor:'#f4f5f5',display:'flex',alignItems:'center',justifyContent:'flex-end'}}>
                            <button style={{color:'#007FFF',fontSize:'15px',border:'none',backgroundColor:'#f4f5f5',cursor:'pointer',width:50,marginRight:10}}>发布</button> 
                        </div>
                    </div>
                    }
                        
                </div>
            </Modal>
       </div>
    )
}
function CommentBox({value:index}){
    const commentSvg = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/336af4d1fafabcca3b770c8ad7a50781.svg'
    const likeSvg = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/00ba359ecd0075e59ffbc3d810af551d.svg'

    return(
        <div>
            <div className='commentBox' id={index?index.comment_id:''} style={{width:375,backgroundColor:'#f4f5f5',display:'flex',justifyContent:'center'}}>
                <div className='avatarBox' style={{width:32,marginRight:10,marginTop:10}}>
                    <img className='avatarImg' style={{width:32,height:32,borderRadius:'50%'}} alt={index?index.user_info.avatar_large:''} src={index?index.user_info.avatar_large:''}></img>
                </div>
                <div className='contentBox' style={{width:300,marginTop:10,display:'flex',flexWrap:'wrap'}}>
                    <div className='userName' style={{height:16,lineHeight:'16px',fontSize:'14px',color:'#333',fontWeight:700,marginBottom:5}}>
                        {index?index.user_info.user_name:''}
                    </div>
                    <div className='comment' style={{width:300,lineHeight:'22px',fontSize:'15px',marginBottom:5,display:'flex',flexWrap:'wrap'}}>
                        {index?index.comment_info.comment_content:''}
                        {/* 在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的 */}
                        <div style={{width:300}}>
                            {
                                index?
                                    (index.comment_info.comment_pics.length>0)?
                                   (<img alt={index.comment_info.comment_pics[0].pic_url} src={index.comment_info.comment_pics[0].pic_url} style={{width:index.comment_info.comment_pics[0].width>300&&index.comment_info.comment_pics[0].height>500?index.comment_info.comment_pics[0].width/10:index.comment_info.comment_pics[0].width,
                                   height:index.comment_info.comment_pics[0].width>300&&index.comment_info.comment_pics[0].height>500?index.comment_info.comment_pics[0].height/10:index.comment_info.comment_pics[0].height}}></img>):'':''
                            }
                        </div>
                    </div>
                    <div className='bottomBar' style={{width:300,height:16,display:'flex',color:'#71777c',marginBottom:10}}>
                        <div className='time' style={{fontSize:'12px',lineHeight:'16px',flex:'7 '}}>
                            {index?getTime(index.comment_info.ctime):''}
                        </div>
                        <div className='comment' style={{flex:'1'}}>
                            <img src={commentSvg} alt={commentSvg} style={{width:16,height:16}}></img>
                        </div>
                        <div className='like' style={{flex:'1',lineHeight:'16px',fontSize:'12px',display:'flex'}}>
                            <div className='likePic' style={{marginRight:5}}>
                                <img src={likeSvg} alt={likeSvg} style={{width:16,height:16}}></img>
                            </div>
                            {index?index.comment_info.digg_count.toLocaleString():''}
                        </div>
                    </div>
                    <ReplyList data={index?index.reply_infos:''}/>
                </div>
            </div>
        </div>
    )
}
function ReplyList({data:reply_infos}){
    // console.log(reply_infos)
    // eslint-disable-next-line
    const [length,setLength] = useState(reply_infos.length)
    const commentSvg = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/336af4d1fafabcca3b770c8ad7a50781.svg'
    const likeSvg = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/00ba359ecd0075e59ffbc3d810af551d.svg'
    if(length===0)
        return <div></div>
    return(
        <div>
            <div className='replyList' style={{display:'flex',width:300,flexWrap:'wrap'}}>
                <div className='replyBox' style={{display:'flex',width:300}}>
                    <div className='avatarBox' style={{width:30,marginRight:6,marginTop:6}}>
                        <img className="avatarPic" alt={reply_infos[0].user_info.avatar_large} src={reply_infos[0].user_info.avatar_large} style={{width:30,height:30,borderRadius:'50%'}}></img>
                    </div>
                    <div className='contentBox' style={{width:264,marginTop:6,display:'flex',flexWrap:'wrap'}}>
                        <div className='userName' style={{height:16,lineHeight:'16px',fontSize:'13px',color:'#333',fontWeight:700,marginBottom:5}}>
                            {reply_infos?reply_infos[0].user_info.user_name:''}
                        </div>
                        <div className='comment' style={{width:300,lineHeight:'22px',fontSize:'14px',marginBottom:5}}>
                            {reply_infos?reply_infos[0].reply_info.reply_content:''}
                            {/* 在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的 */}
                            <img alt={reply_infos?reply_infos[0].reply_info.reply_pics:''} src={reply_infos?reply_infos[0].reply_info.reply_pics:''}></img>
                        </div>
                        <div className='bottomBar' style={{width:300,height:16,display:'flex',color:'#71777c',marginBottom:10}}>
                            <div className='time' style={{fontSize:'12px',lineHeight:'16px',flex:'7 '}}>
                                {reply_infos?getTime(reply_infos[0].reply_info.ctime):''}
                            </div>
                            <div className='comment' style={{flex:'1'}}>
                                <img src={commentSvg} alt={commentSvg} style={{width:16,height:16}}></img>
                            </div>
                            <div className='like' style={{flex:'1',lineHeight:'16px',fontSize:'12px',display:'flex'}}>
                                <div className='likePic' style={{marginRight:5}}>
                                    <img src={likeSvg} alt={likeSvg} style={{width:16,height:16}}></img>
                                </div>
                                {reply_infos?reply_infos[0].reply_info.digg_count.toLocaleString():''}
                            </div>
                        </div>
                    </div>
                </div>
                {length>1? 
                (<div className='replyBox' style={{display:'flex',width:300}}>
                    <div className='avatarBox' style={{width:30,marginRight:6,marginTop:6}}>
                        <img className="avatarPic" alt={reply_infos[1].user_info.avatar_large} src={reply_infos[1].user_info.avatar_large} style={{width:30,height:30,borderRadius:'50%'}}></img>
                    </div>
                    <div className='contentBox' style={{width:264,marginTop:6,display:'flex',flexWrap:'wrap'}}>
                        <div className='userName' style={{height:16,lineHeight:'16px',fontSize:'13px',color:'#333',fontWeight:700,marginBottom:5}}>
                            {reply_infos?reply_infos[1].user_info.user_name:''}
                        </div>
                        <div className='comment' style={{width:300,lineHeight:'22px',fontSize:'14px',marginBottom:5}}>
                            {reply_infos?reply_infos[1].reply_info.reply_content:''}
                            {/* 在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的 */}

                        </div>
                        <div className='bottomBar' style={{width:300,height:16,display:'flex',color:'#71777c',marginBottom:10}}>
                            <div className='time' style={{fontSize:'12px',lineHeight:'16px',flex:'7 '}}>
                                {reply_infos?getTime(reply_infos[1].reply_info.ctime):''}
                            </div>
                            <div className='comment' style={{flex:'1'}}>
                                <img src={commentSvg} alt={commentSvg} style={{width:16,height:16}}></img>
                            </div>
                            <div className='like' style={{flex:'1',lineHeight:'16px',fontSize:'12px',display:'flex'}}>
                                <div className='likePic' style={{marginRight:5}}>
                                    <img src={likeSvg} alt={likeSvg} style={{width:16,height:16}}></img>
                                </div>
                                {reply_infos?reply_infos[1].reply_info.digg_count.toLocaleString():''}
                            </div>
                        </div>
                    </div>
                </div>): ''}
                {length>1?
                <div className='getMore' style={{width:300,height:24,display:'flex',marginBottom:5}}>
                    <div className='getMoreButton' style={{backgroundColor:'#e2e4e4',lineHeight:'24px',height:24,borderRadius:'20px',padding:'0 15px',fontSize:'14px',color:'#71777C',marginLeft:36}}>
                        查看全部{length}条回复
                    </div>
                </div>
                :''}
                
            </div>
        </div>
    )
}
const ShowComment = createContext({})
export function Post(props){
    const id = props.match.params.article_id
    // eslint-disable-next-line
    const [articleId,setArticleId] = useState(id)
    const show = 0
    const reducer = (state,action)=>{
        switch(action.type){
            case 'show':return 1
            case 'close':return 0
            default: return state
        }
    }
    const [state,dispatch] = useReducer(reducer,show)
    // const  Article =  GetArticle(articleId)
    // console.log(Article)
    // useEffect(()=>{
    // console.log(document.documentElement.scrollTop)
    // })
    const history = useHistory()
    //eslint-disable-next-line
    const memo = useMemo(()=>{
        history.page = document.documentElement.scrollTop
        history.index = 1
        document.documentElement.scrollTop=0
        // return document.documentElement.scrollTop
    },[history])
    // const memo = useMemo(()=>{
    //     console.log(document.documentElement.scrollTop+'page')
    // },[])
    return (
    <div>
        <MainHead/>
        <View id={articleId}/>
        <ShowComment.Provider value={{state,dispatch}}>
            <CommentList id = {articleId}/>
            <PostBar id={articleId}/>
        </ShowComment.Provider>
        
    </div>)
}